<template>
<div>
  <BasicTable
    :columns="columns"
    :request="loadDataTable"
    ref="actionRef"
    :row-key="(row) => row.id"
    @update:checked-row-keys="onCheckedRow"
    :actionColumn="actionColumn"
    :scroll-x="1090">
    <template #tableTitle>
      <n-form
        :model="formValue"
        label-placement="left"
        class="py-8"
        inline>
        <n-form-item label="医院名称" path="hosname">
          <n-input v-model:value="formValue.hosname" placeholder="医院名称" />
        </n-form-item>
        <n-form-item label="医院编号" path="hoscode">
          <n-input placeholder="医院编号" v-model:value="formValue.hoscode" />
        </n-form-item>
        <n-form-item>
          <n-button type="primary" @click="reloadTable">查询</n-button>
        </n-form-item>
        <n-form-item>
          <n-button type="error" @click="openSaveDialog">新增</n-button>
        </n-form-item>
        <n-form-item>
          <n-button type="error" @click="batchRemove">批量删除</n-button>
        </n-form-item>
      </n-form>
    </template>
  </BasicTable>

  <!-- 编辑框 -->
  <add ref="addRef" :hospSetId="hospSetId"></add>
</div>

</template>

<script lang="ts" setup>
import { findPageHospSet, deleteHospSet, batchDeleteHospSet, lockHospSet } from "@/api/yygh/hospset";
import { BasicTable, TableAction } from '@/components/Table';
import { columns} from './columns';

import { h, reactive, ref } from "vue";
import { useDialog, useMessage } from "naive-ui";
import add from "./add.vue";

const addRef = ref(null);
const dialog = useDialog();

const message = useMessage();
const formValue = reactive({})
const pageObj = reactive({
  page: 1,
  limit: 10,
  total: 100
})
const actionRef = ref();
const hospSetId = ref(11111) // 当前编辑的医院设置id

const batchCheckIds = ref([]) // 批量选中的id列表

const loadDataTable = async () => {
  return await findPageHospSet(pageObj.page, pageObj.limit, {...formValue});
};

const reloadTable =() => actionRef.value.reload();


function onCheckedRow(rowKeys) {
  console.log(rowKeys);
  rowKeys.forEach(r => batchCheckIds.value.push(r))
}

const actionColumn = reactive({
  width: 350,
  title: '操作',
  key: 'action',
  fixed: 'right',
  render(record) {
    return h(TableAction as any, {
      style: 'button',
      actions: [
        {
          label: record.status? '锁定' : '取消锁定',
          type: record.status?'': 'warning',
          icon: 'ic:outline-delete-outline',
          onClick: ()=> {
            console.log("111", record)
            lockHospSet(record.id, record.status == 0 ? 1: 0).then(() => {
              reloadTable()
            })
          },
          // 根据业务控制是否显示 isShow 和 auth 是并且关系
          ifShow: () => {
            return true;
          },
          // 根据权限控制是否显示: 有权限，会显示，支持多个
          auth: ['admin:hospset:delete'],
        },
        {
          label: '删除',
          icon: 'ic:outline-delete-outline',
          onClick: handleDelete.bind(null, record),
          // 根据业务控制是否显示 isShow 和 auth 是并且关系
          ifShow: () => {
            return true;
          },
          // 根据权限控制是否显示: 有权限，会显示，支持多个
          auth: ['admin:hospset:delete'],
        },
        {
          label: '编辑',
          onClick: handleEdit.bind(null, record),
          ifShow: () => {
            return true;
          },
          auth: ['admin:hospset:update'],
        },
      ],
      dropDownActions: [
        {
          label: '启用',
          key: 'enabled',
          // 根据业务控制是否显示: 非enable状态的不显示启用按钮
          ifShow: () => {
            return true;
          },
        },
        {
          label: '禁用',
          key: 'disabled',
          ifShow: () => {
            return true;
          },
        },
      ],
      select: (key) => {
        message.info(`您点击了，${key} 按钮`);
      },
    });
  },
});

function handleEdit(record: Recordable) {
  console.log('点击了编辑', record);
  hospSetId.value = record.id;
  addRef.value.openModal();
  addRef.value.reloadData(hospSetId.value);
}

function handleDelete(record: Recordable) {
  console.log('点击了删除', record);
  dialog.info({
    title: '提示',
    content: '你确定要删除吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      console.log("确定")
      deleteHospSet(record.id)
      reloadTable()
      // Long id 爪巴
    },
    onNegativeClick: () => {},
  });
}

// 批量删除
function batchRemove() {

  if(batchCheckIds.value.length == 0) {
    message.error("请选择要删除的数据")
  }
  console.log('点击了批量删除', batchCheckIds.value);
  dialog.info({
    title: '提示',
    content: '你确定要批量删除吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      console.log("确定")
      batchDeleteHospSet(batchCheckIds.value)
      reloadTable()
      // Long id 爪巴
    },
    onNegativeClick: () => {},
  });
}

const openSaveDialog =() => addRef.value.openModal()
</script>

<style scoped>

</style>
